<template>
  <div class="searchsuggest">
    <ul class="suggestList">
      <li
        v-for="(v, index) in suggestList"
        :key="index"
        @click="$emit('change', v.keyword)"
      >
        <span class="iconfont icon-search"></span>{{ v.keyword }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SearchSuggest",
  props: ["keywords"],
  data() {
    return {
      suggestList: [],
    };
  },
  created() {
    //第一次进入先执行一次
    this.loadSuggest(this.keywords);
  },
  watch: {
    keywords(val) {
      this.loadSuggest(val);
    },
  },
  methods: {
    loadSuggest(val) {
      if (val.trim() != "") {
        this.$http
          .get("/search/suggest?keywords=" + val + "&type=mobile")
          .then((data) => {
            let result = data.data.result;
            console.log(typeof result);
            if (typeof result == "object") {
              this.suggestList = result.allMatch;
              console.log(this.suggestList);
            } else {
              return;
            }
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.searchsuggest {
  color: black;
  ul {
    background: white;
    border-radius: 15px;
    li {
      padding: 5px;
      margin: 5px;
      line-height: 15px;
      span {
        margin-right: 5px;
      }
    }
  }
}
</style>